import React, { Component } from 'react';
import { Modal, Table, Row, Col } from 'antd';
import { Link } from 'dva/router';
import RangePicker from '../../plugin/rangePicker';
import 'moment/locale/zh-cn';
import moment from 'moment';
import Styles from '../index.less';

moment.locale('zh-cn');

class PacketModal extends Component {
  constructor (props) {
    super(props)
  }

  // 数据请求
  fetchMaterialList = (crGrpIds, beginTime, endTime) => {
    const { onFetchMaterialList } = this.props;
    this.setState({
      crGrpIds: crGrpIds,
      visible: true
    })
    onFetchMaterialList(crGrpIds, beginTime, endTime)
  }

  // 切换时间
  handleRangePicker = (beginTime, endTime) => {
    const { onComplete, planId } = this.props;
    onComplete(planId, beginTime, endTime);
  }

  // 素材列表时间切换查询
  handleMaterialRangePicker = (beginTime, endTime) => {
    const { onFetchMaterialList } = this.props;
    onFetchMaterialList(
      this.state.crGrpIds,
      moment(beginTime).format('YYYY-MM-DD'),
      moment(endTime).format('YYYY-MM-DD')
    );
  }

  render () {
    const materialColumns = [{
      title: '素材ID',
      dataIndex: 'id',
      key: 'id'
    },{
      title: '素材名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        return (
          <a href={record.url} target="_blank" className={Styles.materialLink}><img src={record.url} /><span>{text}</span></a>
        )
      }
    },{
      title: '尺寸',
      dataIndex: 'size',
      key: 'size',
      render: (text, record) => {
        return (
          <span>{record.width}*{record.height}</span>
        )
      }
    },{
      title: '曝光量',
      dataIndex: 'exposureCount',
      key: 'exposureCount',
    }, {
      title: '点击量',
      dataIndex: 'clickCount',
      key: 'clickCount'
    },{
      title: '点击率',
      dataIndex: 'clickRate',
      key: 'clickRate',
    }, {
      title: '点击均价（元）',
      dataIndex: 'avgPrice',
      key: 'avgPrice',
    }, {
      title: '总消耗（元）',
      dataIndex: 'consumeTotal',
      key: 'consumeTotal',
    }];

    return (
      <div>
        <Modal
          width={1000}
          title="创意素材"
          footer={null}
          visible={this.props.visible}
          onCancel={this.props.onHide}
        >
          <div className={Styles.material}>
            <Table
              rowKey={record => record.id}
              dataSource={this.props.materialList}
              columns={materialColumns}
              pagination={false}
            />
          </div>
        </Modal>
      </div>
    )
  }
}

export default PacketModal;
